<ui:composition
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:p="http://primefaces.org/ui">

    <h:outputStylesheet library="css" name="jogo.css"/>
    <h:outputScript library="js" name="jogo_websocket.js"/>
    
    <table id="tabuleiro">
        <tr>
            <td id="0000" class="ponto"></td>
            <td id="0001" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0002" class="ponto"></td>
            <td id="0003" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0004" class="ponto"></td>
            <td id="0005" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0006" class="ponto"></td>
            <td id="0007" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0008" class="ponto"></td>
            <td id="0009" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0010" class="ponto"></td>
            <td id="0011" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0012" class="ponto"></td>
        </tr>
        <tr>
            <td id="0100" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0101" class="meio"></td>
            <td id="0102" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0103" class="meio"></td>
            <td id="0104" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0105" class="meio"></td>
            <td id="0106" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0107" class="meio"></td>
            <td id="0108" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0109" class="meio"></td>
            <td id="0110" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0111" class="meio"></td>
            <td id="0112" class="linha" onclick="enviarJogada(id)"></td>
        </tr>
        <tr>
            <td id="0200" class="ponto" ></td>
            <td id="0201" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0202" class="ponto"></td>
            <td id="0203" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0204" class="ponto"></td>
            <td id="0205" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0206" class="ponto"></td>
            <td id="0207" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0208" class="ponto"></td>
            <td id="0209" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0210" class="ponto"></td>
            <td id="0211" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0212" class="ponto"></td>
        </tr>
        <tr>
            <td id="0300" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0301" class="meio"></td>
            <td id="0302" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0303" class="meio"></td>
            <td id="0304" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0305" class="meio"></td>
            <td id="0306" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0307" class="meio"></td>
            <td id="0308" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0309" class="meio"></td>
            <td id="0310" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0311" class="meio"></td>
            <td id="0312" class="linha" onclick="enviarJogada(id)"></td>
        </tr>
        <tr>
            <td id="0400" class="ponto" ></td>
            <td id="0401" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0402" class="ponto"></td>
            <td id="0403" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0404" class="ponto"></td>
            <td id="0405" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0406" class="ponto"></td>
            <td id="0407" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0408" class="ponto"></td>
            <td id="0409" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0410" class="ponto"></td>
            <td id="0411" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0412" class="ponto"></td>
        </tr>
        <tr>
            <td id="0500" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0501" class="meio"></td>
            <td id="0502" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0503" class="meio"></td>
            <td id="0504" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0505" class="meio"></td>
            <td id="0506" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0507" class="meio"></td>
            <td id="0508" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0509" class="meio"></td>
            <td id="0510" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0511" class="meio"></td>
            <td id="0512" class="linha" onclick="enviarJogada(id)"></td>
        </tr>
        <tr>
            <td id="0600" class="ponto" ></td>
            <td id="0601" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0602" class="ponto"></td>
            <td id="0603" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0604" class="ponto"></td>
            <td id="0605" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0606" class="ponto"></td>
            <td id="0607" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0608" class="ponto"></td>
            <td id="0609" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0610" class="ponto"></td>
            <td id="0611" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0612" class="ponto"></td>
        </tr>
        <tr>
            <td id="0700" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0701" class="meio"></td>
            <td id="0702" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0703" class="meio"></td>
            <td id="0704" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0705" class="meio"></td>
            <td id="0706" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0707" class="meio"></td>
            <td id="0708" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0709" class="meio"></td>
            <td id="0710" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0711" class="meio"></td>
            <td id="0712" class="linha" onclick="enviarJogada(id)"></td>
        </tr>
        <tr>
            <td id="0800" class="ponto" ></td>
            <td id="0801" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0802" class="ponto"></td>
            <td id="0803" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0804" class="ponto"></td>
            <td id="0805" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0806" class="ponto"></td>
            <td id="0807" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0808" class="ponto"></td>
            <td id="0809" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0810" class="ponto"></td>
            <td id="0811" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0812" class="ponto"></td>
        </tr>
        <tr>
            <td id="0900" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0901" class="meio"></td>
            <td id="0902" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0903" class="meio"></td>
            <td id="0904" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0905" class="meio"></td>
            <td id="0906" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0907" class="meio"></td>
            <td id="0908" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0909" class="meio"></td>
            <td id="0910" class="linha" onclick="enviarJogada(id)"></td>
            <td id="0911" class="meio"></td>
            <td id="0912" class="linha" onclick="enviarJogada(id)"></td>
        </tr>
        <tr>
            <td id="1000" class="ponto" ></td>
            <td id="1001" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1002" class="ponto"></td>
            <td id="1003" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1004" class="ponto"></td>
            <td id="1005" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1006" class="ponto"></td>
            <td id="1007" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1008" class="ponto"></td>
            <td id="1009" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1010" class="ponto"></td>
            <td id="1011" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1012" class="ponto"></td>
        </tr>
        <tr>
            <td id="1100" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1101" class="meio"></td>
            <td id="1102" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1103" class="meio"></td>
            <td id="1104" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1105" class="meio"></td>
            <td id="1106" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1107" class="meio"></td>
            <td id="1108" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1109" class="meio"></td>
            <td id="1110" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1111" class="meio"></td>
            <td id="1112" class="linha" onclick="enviarJogada(id)"></td>
        </tr>
        <tr>
            <td id="1200" class="ponto" ></td>
            <td id="1201" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1202" class="ponto"></td>
            <td id="1203" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1204" class="ponto"></td>
            <td id="1205" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1206" class="ponto"></td>
            <td id="1207" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1208" class="ponto"></td>
            <td id="1209" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1210" class="ponto"></td>
            <td id="1211" class="linha" onclick="enviarJogada(id)"></td>
            <td id="1212" class="ponto"></td>
        </tr>
    </table>

</ui:composition>
